<template>
    <div class="app-container">
        <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

        <el-table
            :data="menuList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column prop="title" label="标题" sortable width="180"></el-table-column>
            <el-table-column prop="path" label="访问路径" sortable width="180"></el-table-column>
            <el-table-column prop="component" label="组件路径" sortable width="180"></el-table-column>
            <el-table-column prop="name" label="路由名" sortable width="180"></el-table-column>
            <el-table-column label="是否可见" sortable width="80">
                <template slot-scope="scope">
                    <el-tag v-if="!scope.row.hidden">是</el-tag>
                    <el-tag v-else type="danger">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="icon" label="图标" sortable width="100"></el-table-column>
            <el-table-column prop="permissionValue" label="权限值" width="120"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
                    <el-button
                        v-if="(scope.row.level == 1 || scope.row.level == 2) "
                        type="text"
                        size="mini"
                        @click="() => {dialogFormVisible = true, menu.pid = scope.row.id}"
                    >添加菜单</el-button>
                    <el-button
                        v-if="scope.row.level == 3 "
                        type="text"
                        size="mini"
                        @click="() => {dialogPermissionVisible = true, permission.pid = scope.row.id}"
                    >添加功能</el-button>
                    <el-button
                        v-if="scope.row.level == 4 "
                        type="text"
                        size="mini"
                        @click="() => updateFunction(scope.row)"
                    >修改功能</el-button>
                    <el-button
                        v-if="scope.row.level != 4 "
                        type="text"
                        size="mini"
                        @click="() => getById(scope.row)"
                    >修改</el-button>
                    <el-button type="text" size="mini" @click="() => remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
            <el-form ref="menu" :model="menu" :rules="menuValidateRules" label-width="120px">
                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="menu.title" />
                </el-form-item>
                <el-form-item label="访问路径" prop="path">
                    <el-input v-model="menu.path" />
                </el-form-item>
                <el-form-item label="组件路径" prop="component">
                    <el-input v-model="menu.component" />
                </el-form-item>
                <el-form-item label="路由名称">
                    <el-input v-model="menu.name" />
                </el-form-item>
                <el-form-item label="是否可见" prop="hidden">
                    <el-switch
                        v-model="menu.hidden"
                        active-color="#ff4949"
                        inactive-color="#13ce66"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="menu.icon" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="restData()">取 消</el-button>
                <el-button type="primary" @click="append()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加功能的窗口 -->
        <el-dialog :visible.sync="dialogPermissionVisible" title="添加功能">
            <el-form
                ref="permission"
                :model="permission"
                :rules="permissionValidateRules"
                label-width="120px"
            >
                <el-form-item label="功能名称" prop="title">
                    <el-input v-model="permission.title" />
                </el-form-item>
                <el-form-item label="访问路径">
                    <el-input v-model="permission.path" />
                </el-form-item>
                <el-form-item label="组件路径">
                    <el-input v-model="permission.component" />
                </el-form-item>
                <el-form-item label="路由名称">
                    <el-input v-model="permission.name" />
                </el-form-item>
                <el-form-item label="是否可见">
                    <el-switch
                        v-model="permission.hidden"
                        active-color="#ff4949"
                        inactive-color="#13ce66"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="功能权限值" prop="permissionValue">
                    <el-input v-model="permission.permissionValue" />
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="permission.icon" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="restData()">取 消</el-button>
                <el-button type="primary" @click="appendPermission()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import menu from "@/api/acl/permission";

const menuForm = {
    title: "",
    name: "",
    pid: 0,
    path: "",
    component: "",
    type: "1",
    hidden: false,
    icon: "",
};
const perForm = {
    permissionValue: "",
    type: "2",
    title: "",
    path: "",
    component: "",
    pid: 0,
    name: "",
    hidden: false,
    icon: "",
};

export default {
    data() {
        return {
            filterText: "",
            menuList: [],
            defaultProps: {
                children: "children",
                label: "name",
            },
            dialogFormValue: "添加菜单",
            dialogFormVisible: false,
            dialogPermissionVisible: false,
            menu: menuForm,
            permission: perForm,
            menuValidateRules: {
                title: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "菜单名必须输入",
                    },
                ],
                path: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "菜单路径必须输入",
                    },
                ],
                component: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "组件名称必须输入",
                    },
                ],
            },
            permissionValidateRules: {
                title: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "功能名称必须输入",
                    },
                ],
                permissionValue: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "功能权限值必须输入",
                    },
                ],
            },
        };
    },
    // 监听上面文本框搜索
    watch: {
        filterText(val) {
            this.$refs.menuTree.filter(val);
        },
    },

    created() {
        this.fetchNodeList();
    },

    methods: {
        fetchNodeList() {
            menu.indexAllPermission().then((response) => {
                if (response.success === true) {
                    this.menuList = response.data.permissions;
                }
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
        },
        remove(data) {
            console.log(data);

            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return menu.remove(data.id);
                })
                .then(() => {
                    this.fetchNodeList(); // 刷新列表
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch((response) => {
                    // 失败
                    if (response === "cancel") {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: "删除失败",
                        });
                    }
                });
        },
        appendPermission() {
            this.$refs.permission.validate((valid) => {
                if (valid) {
                    if (this.permission.id) {
                        this.update(this.permission);
                    } else {
                        menu.save(this.permission).then((response) => {
                            this.dialogPermissionVisible = false;

                            this.$message({
                                type: "success",
                                message: "添加功能成功",
                            });
                            // 刷新页面
                            this.fetchNodeList();
                            this.menu = { ...menuForm };
                            this.permission = { ...perForm };
                        });
                    }
                }
            });
        },
        appendLevelOne() {
            menu.save(this.menu)
                .then((response) => {
                    this.dialogFormVisible = false;
                    this.$message({
                        type: "success",
                        message: "添加一级菜单成功",
                    });
                    // 刷新页面
                    this.fetchNodeList();
                    this.menu = { ...menuForm };
                    this.permission = { ...perForm };
                })
                .catch((response) => {
                    // 你们写：判断点击取消清空一下
                    this.dialogFormVisible = false;
                    this.$message({
                        type: "error",
                        message: "添加一级菜单失败",
                    });
                    this.menu = { ...menuForm };
                    this.permission = { ...perForm };
                });
        },

        append() {
            this.$refs.menu.validate((valid) => {
                if (valid) {
                    if (!this.menu.id) {
                        // 添加
                        if (this.menu.pid == 0) {
                            this.appendLevelOne(); // 一级分类的添加
                        } else {
                            this.appendLevelTwo(); // 二级分类的添加
                        }
                    } else {
                        // 修改
                        this.update(this.menu);
                    }
                }
            });
        },

        update(obj) {
            menu.update(obj).then((response) => {
                this.dialogFormVisible = false;
                this.$message({
                    type: "success",
                    message: "修改成功",
                });
                // 刷新页面
                this.fetchNodeList();
                this.restData();
            });
        },
        appendLevelTwo() {
            menu.save(this.menu)
                .then((response) => {
                    // 1、把文本框关
                    this.dialogFormVisible = false;
                    // 2、提示成功
                    this.$message({
                        type: "success",
                        message: "添加二级分类成功",
                    });
                    // 3、刷新页面
                    this.fetchNodeList();
                    // 4、把menu清空
                    this.menu = { ...menuForm };
                    this.permission = { ...perForm };
                })
                .catch((response) => {
                    // 1、把文本框关
                    this.dialogFormVisible = false;
                    // 2、提示成功
                    this.$message({
                        type: "error",
                        message: "添加二级分类失败",
                    });
                    // 3、把menu清空
                    this.menu = { ...menuForm };
                    this.permission = { ...perForm };
                });
        },
        getById(data) {
            this.dialogFormVisible = true;
            this.menu = data;
        },
        updateFunction(data) {
            console.log("====", data);
            this.dialogPermissionVisible = true;
            this.permission = data;
        },
        restData() {
            this.dialogPermissionVisible = false;
            this.dialogFormVisible = false;
            this.menu = { ...menuForm };
            this.permission = { ...perForm };
        },
    },
};
</script>
